<template>
  <div v-loading="loading" class="clearfix">
    <el-row>
      <el-col :span="24">
        <el-form ref="item" :rules="rules" :model="item" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="录播封面：">
                <uploadImg
                  remark="录播封面"
                  :list="photoList"
                  type-code="IMAGE_LIVE_COVER"
                  :data-id="$props.id"
                  @changeadvert="changeadvert"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="录播视频：">
                <uploadVideo
                  _type="1"
                  :data-id="$props.id"
                  :obj="item.liveUrl ? item.liveUrl+'?spm=a2c4g.11186623.2.1.yjOb8V&x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast':''"
                  :type-code="null"
                  @changeSubmitVideo="changeSubmitVideo"
                  @changeadvert="changeadvert1"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="录播标题：">
                <el-input v-model="item.tittle" style="width:180px;" placeholder="录播标题" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="录播时长：">
                <el-input v-model="item.duration" style="width:180px;" placeholder="录播时长" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
               <!-- prop="giftsNum" -->
              <el-form-item label="礼物总数：">
                <el-input v-model="item.giftsNum" style="width:180px;" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
               <!-- prop="numberViewers" -->
              <el-form-item label="最高人气：">
                <el-input v-model="item.numberViewers" style="width:180px;" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="录播起止：">
                <el-date-picker
                  v-model="dataPickData"
                  type="datetimerange"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="tagsArr.length">
            <el-col :span="24">
              <el-form-item label="录播标签：">
                <NewTags :data="tagsArr" :init-data="initData" @changeTag="changeLabel" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="是否上架：">
                <el-checkbox v-model="item.status" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="display:flex;justify-content:center">
          <el-button style="margin:25px auto;" type="primary" @click="submit">保 存</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const item = {
  giftsNum: '', // 礼物总数
  numberViewers: '', // 最高观看人数
  startTime: '', // 录播开始时间
  creationTime: '', // 录播结束时间
  liveUrl: '', // 视频录入框
  duration: null, // 录播时长
  historicalNumber: null, // 历史观看人数
  id: '', //
  label: '', // 录播标签
  liveCover: '', // 录播封面
  projectId: '', // 商机的ID
  startTime: '', // 录播开始时间
  status: false, // 是否上架
  tittle: '', // 录播标题
  memberId: ''
}
import uploadVideo from '~/components/commom/uploadVideo';
import uploadImg from '~/components/commom/uploadImg';
import mmUrl from '~/utils/utilUrl';
import NewTags from '~/components/commom/newTags';
import regular from '~/utils/regular';

export default {
  components: {
    uploadImg,
    uploadVideo,
    NewTags
  },
  props: ['id', 'dialogVisibleRecord'],
  data() {
    return {
      rules: { giftsNum: regular.positive, numberViewers: regular.positive },
      dataPickData: '',
      members: [],
      dataId: this.$props.id,
      isCreate: this.$props.id === 'create',
      loading: false,
      photoList: [],
      projectIdArr: [],
      tagsArr: [], // label数组
      item,
      canSubmitVideo: false,
      recordedCover: {}
    }
  },
  computed: {
    initData() {
      return this.item.label ? JSON.parse(this.item.label) : '';
    }
  },
  watch: {
    'props.dialogVisibleRecord'(newd) {
      if (!newd) {
        this.$refs['item'].resetField()
        this.photoList = []
      }
    },
    dataPickData(newd) {
      this.item.startTime = newd[0]
      this.item.creationTime = newd[1]
    },
    '$props.id'() {
      this.getInit()
    }
  },
  mounted() {
    this.getInit()
    this.getLabel()
  },
  methods: {
    changeadvert1(res) {
      this.item.liveUrl = res.url
    },
    changeSubmitVideo(res) {
      this.canSubmitVideo = res
    },
    changeLabel(res) {
      this.item.label = JSON.stringify(res)
    },
    getInit() {
      this.$post({
        url: this.isCreate ? mmUrl.live.hisLoadCreate : mmUrl.live.hisLoadEdit,
        data: {
          id: this.isCreate ? '' : this.$props.id
        }
      }).then(res => {
        this.loading = false
        this.item = res.item
        this.dataPickData = [res.item.startTime, res.item.creationTime]
        this.getFiles()
      })
    },
    getFiles() {
      this.$post({
        url: mmUrl.file.getfiles,
        data: {
          dataId: this.$props.id,
          typeCode: 'IMAGE_LIVE_COVER'
        }
      }).then(res => {
        res.length ? (this.photoList = res) : (this.photoList = [])
      })
    },
    changeadvert(res) {
      this.recordedCover = res
    },
    getLabel() {
      this.$post({
        url: mmUrl.label.pageLoad,
        data: {
          keyword: '',
          page: {
            maxResultCount: 0,
            pageNo: 0,
            pageSize: 10,
            skipCount: 0
          },
          type: 0
        }
      }).then(res => {
        this.tagsArr = res.items.items
      })
    },
    submitPhoto() {
      this.$post({
        url: mmUrl.file.uploadFile,
        data: {
          items: [this.recordedCover]
        }
      }).then(res => console.log(res))
    },
    submit() {
      this.$refs['item'].validate(valid => {
        if (valid) {
          const result = {}
          result.item = JSON.parse(JSON.stringify(this.item))
          this.$post({
            url: this.isCreate ? '' : mmUrl.live.hisEdit,
            data: result
          }).then(res => {
            this.submitPhoto()
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getInit()
          })
        }
      })
    }
  }
}
</script>

<style lang='scss'>
.hoverDeleteIcon {
  :hover {
    color: red;
  }
}
</style>
